<template>
	<view class="content_box">
		<view class="aaa">
			<view class="bg_box"></view>
		<!-- 	<vimage mode="widthFix"  
				:src="form.other.prize_top_img"></vimage> -->
				<image v-if="form.other.prize_top_img"
				 mode="widthFix"  :src="form.other.prize_top_img" 
				 class="bg_imgr" :style="boxImg" ></image>
				<image mode="widthFix" v-else class="bg_imgr" :style="boxImg" imgtype="1"
				:src="prize_top_img"></image>
		</view>
		<view class="content_bg">
			<view class="content_bg1">
				<view class="content_bg2">
					<view class="lottery">
						<view class="lottery-item">
							<view class="lottery-start">
								<view class="box" @click="startLottery">
									<vimage v-if="form.other.prize_btn_img" mode="widthFix"
										:src="form.other.prize_btn_img"></vimage>
									
									<vimage v-else src="static/images/prize_btn.png" imgtype="1"></vimage>
								</view>
							</view>
							<ul>
								<li v-for="(item, i) in form.config" :class="i == index ? 'on' : ''" :key="i">
									<view class="box">
										<view class="view">
											<view class="box-img">
												<vimage mode="widthFix" :src="item.image" alt=""></vimage>
											</view>
											<text :style="'color:' + form.other.btn_color">{{ item.name }}</text>
										</view>
									</view>
								</li>
							</ul>
						</view>
					</view>
				</view>
			</view>
			<view>
				<u-notice-bar type="none" color="#fff" :volume-icon="false" mode="vertical" :font-size="24"
					:list="list"></u-notice-bar>
			</view>
		</view>
	</view>
</template>

<script>
	import util from '@/common/util.js';
	export default {
		props: {
			list: {
				type: Array,
				default: null
			},
			form: {
				type: Object,
				default: null
			},
			winList: {
				type: Object | String,
				default: null
			}
		},
		data() {
			return {
				isStart: 1,
				score: 10,
				index: -1,
				count: 8,
				timer: 0,
				speed: 200,
				times: 0,
				cycle: 50,
				prize: -1,
				click: true,
				showToast: false,
				url:'static/images/prize_img.png'
			};
		},
		computed: {
			prizeColor() {
				return this.form.other.btn_color;
			},
			boxImg() {
				// #ifdef MP-WEIXIN
				return 'bottom:' + this.form.other.box_img * 2 + 'rpx;';
				// #endif
				// #ifndef MP-WEIXIN
				return 'bottom:' + (this.form.other.box_img) * 2 + 'rpx;';
				// #endif
			},
			prize_top_img(){
				return util.getimgurl(this.url,"1")
			}
		},
		watch: {
			winList: function() {
				if (this.winList instanceof Object) {
					this.startRoll();
				} else {
					uni.showToast({
						title: this.winList,
						icon: 'none',
						duration: 2000
					});
				}
			}
		},
		methods: {
			startLottery() {
				if (!this.click) {
					return;
				}
				this.index = -1;
				this.$emit('win', false, 1);
				if (typeof this.winList == 'string') {
					uni.showToast({
						title: this.winList,
						icon: 'none',
						duration: 2000
					});
				}
			},
			startRoll() {
				this.times += 1;
				this.click = false;
				this.oneRoll();
				if (this.times > this.cycle + 10 && this.prize === this.index) {
					clearTimeout(this.timer);
					this.prize = -1;
					this.times = 0;
					this.speed = 200;
					this.click = true;
					let that = this;
					setTimeout(res => {
						that.$emit('win', true);
						that.showToast = true;
					}, 200);
				} else {
					if (this.times < this.cycle) {
						this.speed -= 10;
					} else if (this.times === this.cycle) {
						const _result = this.winList.uniqid;
						let nullList = [];
						for (let s = 0; s < this.form.config.length; s++) {
							if (_result === '000000') {
								if (this.form.config[s].uniqid == '000000') {
									nullList.push(s);
								}
							} else {
								if (this.form.config[s].uniqid == _result) {
									this.prize = s;
								}
							}
						}
						if (nullList.length > 0) {
							let num = Math.floor(Math.random() * nullList.length);
							this.prize = nullList[num];
						}
						if (this.prize > 8) {
							this.prize = 8;
						}
					} else if (this.times > this.cycle + 10 && ((this.prize === 0 && this.index === 8) || this.prize ===
							this.index + 1)) {
						this.speed += 160;
					} else {
						this.speed += 20;
					}
					if (this.speed < 40) {
						this.speed = 40;
					}
					this.timer = setTimeout(this.startRoll, this.speed);
				}
			},

			oneRoll() {
				let index = this.index;
				const count = this.count;
				index += 1;
				if (index > count - 1) {
					index = 0;
				}
				this.index = index;
			}
		}
	};
</script>
<style lang="scss" scoped>
	.content_box {
		width: 80vw;
		margin: auto;
		// margin-top: 45vh;

		.content_bg {
			width: 100%;
			height: 600rpx;
			background-image: linear-gradient(#ff9c6b, #ff5c4a);
			border-radius: 30rpx;
			box-sizing: border-box;
			padding: 20rpx 22rpx 70rpx;
			box-shadow: 0 6rpx 0 #d72b27 inset;
			border-left: solid 4rpx rgba(255, 255, 255, 0.4);
			border-right: solid 4rpx rgba(255, 255, 255, 0.4);

			.content_bg1 {
				width: 100%;
				height: 100%;
				background: #ff4631;
				border-radius: 30rpx;
				box-shadow: rgba(255, 255, 255, 0.3) 0rpx 2rpx 10rpx;
				padding: 20rpx;

				.content_bg2 {
					width: 100%;
					height: 100%;
					background: #d62e1e;
					border-radius: 30rpx;
					box-shadow: #d02a1b 0rpx -6rpx 10rpx;

					.lottery-box {
						overflow: hidden;
					}

					.lottery-box .title {
						text-align: center;
						padding: 100rpx 0;
						font-size: 18rpx;
						color: #fff;
					}

					.lottery {
						width: 100%;
						height: 100%;
					}

					.lottery .lottery-item {
						height: 100%;
						position: relative;
					}

					.lottery .lottery-item ul li {
						width: 30%;
						height: 30%;
						position: absolute;
						margin: 10rpx;
						list-style-type: none;
					}

					.lottery .lottery-item ul li:nth-child(2) {
						left: 33%;
					}

					.lottery .lottery-item ul li:nth-child(3) {
						left: 66%;
					}

					.lottery .lottery-item ul li:nth-child(4) {
						left: 66%;
						top: 32%;
					}

					.lottery .lottery-item ul li:nth-child(5) {
						left: 66%;
						top: 64%;
					}

					.lottery .lottery-item ul li:nth-child(6) {
						left: 33%;
						top: 64%;
					}

					.lottery .lottery-item ul li:nth-child(7) {
						left: 0;
						top: 64%;
					}

					.lottery .lottery-item ul li:nth-child(8) {
						left: 0;
						top: 32%;
					}

					.lottery .lottery-item ul li .box {
						height: 100%;
						position: relative;
						text-align: center;
						background-color: #fff;
						box-shadow: 0rpx -10rpx 0rpx #ffcacb inset;
						border-radius: 25rpx;
						overflow: hidden;
						padding: 10rpx;
						// border:2px solid rgba(255,255,255,0);

						text {
							font-size: 24rpx;
							width: 100%;
							margin-top: 8rpx;
						}

						.box-img {
							height: 85rpx;
							overflow: hidden;
							border-radius: 10rpx;
						}
					}

					.lottery .lottery-item ul li.on .box {
						border: #ffb000 solid 5rpx;
						border-bottom: none;
						box-shadow: 0rpx -10rpx 0rpx #ffb000 inset;

						.view {
							position: relative;
							top: -2px;
						}
					}

					.lottery .lottery-item .lottery-start {
						position: absolute;
						left: 33%;
						width: 30%;
						top: 32%;
						height: 30%;
						margin: 10rpx;
					}

					.lottery .lottery-item .lottery-start .box {
						height: 100%;
						cursor: pointer;
						position: relative;
						z-index: 999;

						/deep/ .img_box {
							._image {
								position: relative;
								top: 50%;
								/*偏移*/
								transform: translateY(-50%);
							}
						}
					}
				}
			}
		}

		.bg_box {
			width: 72%;
			margin: auto;
			height: 60rpx;
			background: #f9604f;
			border: #fa5542 solid 6rpx;
			display: block;
			position: relative;
			top: -56rpx;
			z-index: -1;
			font-size: 60rpx;
			border-radius: 10rpx;
			-webkit-transform: perspective(0.6em) rotateX(20deg);
		}

		.bg_imgr {
			position: absolute;
			z-index: 9;
			width: 100%;

			bottom: 0rpx;
		}
	}

	.aaa {
		position: relative;
		height: 1rpx;

		/deep/.img_box {
			overflow: visible;
		}
	}
</style>
